<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 引入jq -->
    <script src="../Jquery/jquery.min.js"></script>
    <style>
        .mulu{
            display:inline-block;
            color: darkgray;
            cursor: pointer;
            padding: 10px 30px;
            font-size: 14px;
        }
        body{
            text-align: center;
        }
        p{
            font-size: 22px;
        }
        /* 2 因为首页是最新  所以要隐藏后面的两个。 */
        ._hot,._type{
            display: none;
        }
        /* 3 这一步是他们三个的大小 ， 为了方便观察。 */
        ._new,._hot,._type{
            width: 800px;
            min-height: 1000px;
            background-color:fuchsia;
            margin: 20px auto;
        }
        .mulu.active{
            color: orange;
            border-bottom: 2px solid darkgrey   ;
        }
        /* 4 我们要点他们进行切换  所以要绑定事件 */
    </style>
</head>
<body>
    <p>发现酷玩</p>
    <span class="mulu active" content1="_new">最新</span>
    <span class="mulu"content1="_hot">最热</span>
    <span class="mulu"content1="_type">品类</span>
    <div class="_new">zuixin</div>
    <div class="_hot">zuire</div>
    <div class="_type">pinlei</div>
    <script>
        $(function(){
            // 1添加按钮事件
            var mulu_1 =$('.mulu');
            // 接下来就是写内容 div 还有他们的切换
            var div1 = $('._new');
            var div2 = $('._hot');
            var div3 = $('._type');
            $.each(mulu_1,function(index,el){
                // console.log(el);
                $(el).click(function(){
                    // 2点击事件
                    // 3先清空所有的class activ 然后给当前点击的active（元素）
                    $('.mulu.active').removeClass('active');
                    $(this).addClass('active');
                    // 4 上面是切换的主题 下一步是内容的切换 3个大div显示隐藏
                    console.log($(this).attr('content1'))
                    div1.hasClass($(this).attr('content'))?div1.show():div1.hide();
                    div2.hasClass($(this).attr('content'))?div1.show():div2.hide();
                    div3.hasClass($(this).attr('content'))?div1.show():div3.hide();
                    // 5 发请求获取对应的数据   请求地址的判断
                    if($(this).attr('content')==='_type'){
                        div1.hide();
                        div2.hide();
                        div3.show();
                    }else if($(this).attr('content')==='_hot'){
                        // 显示的是最热 获取的也是最热的数据
                        div1.hide();
                        div2.show();
                        div3.hide();

                    }else if($(this).attr('content')==='_new'){
                        // 最新
                        div1.show();
                        div2.hide();
                        div3.hide();

                    }
                })
            })
        })
    </script>
</body>
</html>